<template>
  <div class="QA-review-container">
    <van-empty v-if="QAList.length === 0" description="暂无内容" />
    <template v-else>
      <div class="top-info">
        <div :class="{ 'active-tab': activeTab === 0 }" @click="activeTab = 0">
          全部问答({{ QAList.length }})
        </div>
        <div :class="{ 'active-tab': activeTab === 1 }" @click="activeTab = 1">
          客户提问({{ customerQAList.length }})
        </div>
        <div :class="{ 'active-tab': activeTab === 2 }" @click="activeTab = 2">
          内部伙伴提问({{ interviewerQAList.length }})
        </div>
        <div class="copy-btn" @click="handleCopy">
          <img src="@/icons/svg/minute/copy_icon.svg" alt="copy" />
        </div>
      </div>
      <div
        class="QA-cell"
        v-for="(item, index) in cp_QAList"
        :key="index"
        @click="onClickCell(item)"
      >
        <span>
          <div class="qa-tag mr-2">
            <span class="qa-type">问</span>
            <span class="qa-role">{{ item.q_role }}</span>
          </div>
          <span class="qa-content" style="color: #262626; font-weight: 500"
            >{{ item.q_name }}:{{ item.Question }}</span
          >
        </span>

        <br />
        <div class="h-4" />

        <span class="qa-answer">
          <div class="qa-tag mr-2">
            <span class="qa-type answer-type">答</span>
            <span class="qa-role">{{ item.a_role }}</span>
          </div>
          <span class="qa-content text-[#8C8C8C]"
            >{{ item.a_name }}:{{ item.Answer }}</span
          >
        </span>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import { mapActions, mapState } from "pinia";
import { useMinutesStore } from "@/store";
import { showToast } from "vant";
import { addToClipboard } from "/src/utils/stringTool.js";
import { SpeechOverview, SpeechOverviewType } from "@/types";

export default {
  data() {
    return {
      activeTab: 0,
    };
  },
  methods: {
    ...mapActions(useMinutesStore, {
      setPlayerTimeStamp: "setPlayerTimeStamp",
      getSpeakOverview: "getSpeakOverview",
    }),

    onClickCell(item) {
      console.log("onClickCell: ", item);
      let targetArray = item.SentenceIdsOfQuestion || item.SentenceIdsOfAnswer || [];
      if (targetArray.length === 0) return;
      const osi = targetArray[0];

      const findTargetCell = (element, targetOsi) => {
        if (element.osi === targetOsi) {
          this.setPlayerTimeStamp(element.bt);
          return true;
        }
      };
      for (let index = 0; index < this.asrResultList.length; index++) {
        const asrInfo = this.asrResultList[index];
        if (asrInfo.AsrList) {
          for (const subAsr of asrInfo.AsrList) {
            if (findTargetCell(subAsr, osi)) {
              break;
            }
          }
        } else {
          if (findTargetCell(asrInfo, osi)) {
            break;
          }
        }
      }
    },
    handleCopy() {
      const text = this.currentList
        .map((item) => {
          if (this.activeTab === 0) {
            return `问(${item.q_role})${item.q_name}：${item.Question}\n答(${item.a_role})${item.a_name}：${item.Answer}`;
          } else if (this.activeTab === 1) {
            return `问(${item.q_role})${item.q_name}：${item.Question}\n答(${item.a_role})${item.a_name}：${item.Answer}`;
          } else {
            return `问(${item.q_role})${item.q_name}：${item.Question}\n答(${item.a_role})${item.a_name}：${item.Answer}`;
          }
        })
        .join("\n\n");

      addToClipboard(text);
      showToast("复制成功");
    },
  },

  computed: {
    ...mapState(useMinutesStore, {
      QAList: "getQAList",
      speechOverviewData: "speechOverviewData",
      asrResultList: "asrList",
    }),

    cp_QAList() {
      if (this.activeTab === 0) {
        return this.allQAList;
      } else if (this.activeTab === 1) {
        return this.customerQAList;
      } else if (this.activeTab === 2) {
        return this.interviewerQAList;
      }
      return [];
    },

    allQAList() {
      return this.QAList.map((item) => {
        const { UsersOfQuestion, UsersOfAnswer } = item;
        console.log("debug === QAList", item);
        // 提问
        let q_type,
          q_role,
          q_name = "other";
        if (UsersOfQuestion.length > 0) {
          const userId = UsersOfQuestion[0];

          let speakOverView: SpeechOverview = this.getSpeakOverview(userId) || {};

          q_type =
            speakOverView.type === SpeechOverviewType.INTERNAL_PARTNER
              ? "internal"
              : "customer";
          q_role =
            speakOverView.type === SpeechOverviewType.CUSTOMER_ROLE ? "客户" : "伙伴";
          q_name = speakOverView.name;
        }

        // 回答
        let a_type,
          a_role,
          a_name = "other";
        if (UsersOfAnswer.length > 0) {
          const userId = UsersOfAnswer[0];
          let speakOverView: SpeechOverview = this.getSpeakOverview(userId) || {};

          a_type =
            speakOverView.type === SpeechOverviewType.INTERNAL_PARTNER
              ? "customer"
              : "internal";
          a_role =
            speakOverView.type === SpeechOverviewType.CUSTOMER_ROLE ? "客户" : "伙伴";
          a_name = speakOverView.name;
        }
        return { ...item, q_type, q_role, q_name, a_type, a_role, a_name };
      });
    },

    customerQAList() {
      return this.allQAList.filter((item) => item.q_type === "customer");
    },

    interviewerQAList() {
      return this.allQAList.filter((item) => item.q_type === "internal");
    },

    currentList() {
      if (this.activeTab === 0) {
        return this.allQAList;
      } else if (this.activeTab === 1) {
        return this.customerQAList;
      } else if (this.activeTab === 2) {
        return this.interviewerQAList;
      }
      return [];
    },
  },
};
</script>

<style lang="less" scoped>
.QA-review-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 15px;

  .QA-cell {
    padding: 16px;
    background-color: #ffffff;
    border-radius: 4px;
    margin: 12px 0;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    .qa-question,
    .qa-answer {
      // position: relative;
      margin-bottom: 12px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .qa-tag {
      // position: absolute;
      left: 0;
      top: 0;
      display: inline-flex;
      align-items: center;
      background: #d9f7be;
      border-radius: 4px;
      padding: 2px 4px;
      height: 20px;
      z-index: 1;

      .qa-type {
        background: #52c41a;
        color: #ffffff;
        padding: 0 2px;
        font-size: 12px;
        border-radius: 4px;
      }

      .qa-role {
        color: #52c41a;
        font-size: 12px;
        margin-left: 4px;
      }
    }

    .qa-content {
      font-size: 14px;
      line-height: 24px;
      color: #8c8c8c;
      text-indent: 60px;
    }

    .qa-answer {
      .qa-tag {
        background: #e6eeff;

        .qa-type {
          background: #436bff;
        }

        .qa-role {
          color: #436bff;
        }
      }
    }
  }
}

.top-info {
  width: 100%;
  font-weight: 400;
  font-size: 14px;
  color: #595959;
  line-height: 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 0 15px;
  margin-bottom: 10px;

  div {
    color: #595959;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
  }

  .active-tab {
    color: #436bff;
  }

  .copy-btn {
    font-size: 18px;
    color: #606266;
    background-color: white;
    border-radius: 4px;
    padding: 6px;
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

    img {
      width: 20px;
      height: 20px;
    }
  }
}
</style>
